<!DOCTYPE html>
<th:block xmlns:th="https://www.thymeleaf.org"
          th:insert="~{common/layout :: layout (showTitle = ${#messages.msg('page.archives.browser.title', site.title)},
       canonical = @{/archives}, content = ~{::content}, isPost = false)}">
  <th:block th:fragment="content" th:with="isEmpty = ${#lists.isEmpty(archives.items)}">
    <div th:if="${isEmpty}" class="card card-empty" th:with="title=#{global.route.back.home.name},
            linkHtml='&lt;a href=&quot;/&quot; aria-label=&quot;' + ${title} + '&quot; title=&quot;' + ${title} + '&quot;&gt;' + ${title} + '&lt;/a&gt;',
            finalMessage=${#messages.msg('page.archives.posts.empty.tip', linkHtml)}">
      <i class="ri-inbox-2-fill"></i>
      [(${finalMessage})]
    </div>
    <th:block th:unless="${isEmpty}">
      <div th:each="archive : ${archives.items}" class="card card-content">
        <div class="timeline-title" th:text="${archive.year}"></div>
        <div class="timeline">
          <th:block th:each="months : ${archive.months}">
            <article th:each="post : ${months.posts}" class="media"
                     th:with="thumbnail_img = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : post.spec.cover}">
              <a th:if="${!#strings.isEmpty(thumbnail_img)}" th:href="${post.status.permalink}" th:aria-label="${post.spec.title}" th:title="${post.spec.title}" class="media-left">
                <img class="not-gallery" th:alt="${post.spec.title}" th:classappend="${theme.config.basic_info.lazy_enable} ? 'lazyload'" width="auto" height="auto"
                     th:data-srcset="${theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w| : ''"
                     th:srcset="${!theme.config.basic_info.lazy_enable} ? |${thumbnail.gen(thumbnail_img, 's')} 400w,
              ${thumbnail.gen(thumbnail_img, 'm')} 800w| : ''"
                     sizes="(max-width: 400px) 400px, (max-width: 800px) 800px"
                     th:src="${theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"
                     th:data-src="${!theme.config.basic_info.lazy_enable ? '' : thumbnail_img}"/>
              </a>
              <div class="media-content">
                <time th:text="${#dates.format(post.spec.publishTime, theme.config.basic_info.global_time_format)}"></time>
                <a th:href="${post.status.permalink}" class="title has-link-grey" th:text="${post.spec.title}" th:aria-label="${post.spec.title}" th:title="${post.spec.title}"></a>
                <p th:if="${!#lists.isEmpty(post.categories)}">
                  <a class="has-link-grey"
                     th:each="cy : ${post.categories}"
                     th:href="${cy.status.permalink}"
                     th:aria-label="${cy.spec.displayName}"
                     th:title="${cy.spec.displayName}"
                     th:text="${cy.spec.displayName}"></a>&nbsp;
                </p>
              </div>
            </article>
          </th:block>
        </div>
      </div>
      <th:block th:replace="~{main/pagination :: pagination (${archives}, '/archives')}"/>
    </th:block>
  </th:block>
</th:block>